import * as React from "react";
import {
  View,
  ScrollView,
  Dimensions,
  StyleSheet,
  Alert,
  ActionSheetIOS,
  SafeAreaView,
  Platform
} from "react-native";

import { observer, inject } from "mobx-react";

import { Input, Button, Overlay } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import ImagePicker from "react-native-image-crop-picker";
import ActionSheet from "react-native-actionsheet";

import ButtonGroup from "./View/ButtonGroup";
import PopView from "./View/PopView";
import ImageView from "./View/ImageView";
import { SwipeData } from "./Service/MockData";
import RNToast from "./View/ShowToast";
import SwiperView from "./View/SwiperView";
import HomeStore from "./Model/HomeStore";

interface Props extends React.Props<any> {
  navigation: any;
  homeStore: HomeStore;
}

interface State {
  inputContents: Array<string>;
}

const { height, width } = Dimensions.get("window");

@inject("homeStore")
@observer
export default class HomeDetail extends React.Component<Props, State> {
  //引用
  _scrollView: any;
  _actionSheet: any;

  constructor(props: Props) {
    super(props);
    this.state = {
      inputContents: []
    };
  }

  static navigationOptions: any = {
    title: "主页详情"
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView
          style={styles.scrollContent}
          ref={(ref: any) => (this._scrollView = ref)}
        >
          <SwiperView swipeData={SwipeData} />
          <ButtonGroup
            style={styles.buttonGroupStyle}
            didClickBtnClosure={(content: string) => {
              let sumContents: Array<string> = this.state.inputContents;
              let index: number = sumContents.indexOf(content);
              if (index < 0) {
                sumContents.push(content);
              } else {
                sumContents.splice(index, 1);
              }
              this.setState({
                inputContents: sumContents
              });
            }}
          />
          <View style={{ flex: 1 }} onTouchStart={this._pressInput}>
            <Input
              containerStyle={styles.textInputStyle}
              placeholder={"请输入您想学习的主题"}
              inputStyle={{ fontSize: 16 }}
              inputContainerStyle={
                {
                  // borderBottomColor: "rgba(255, 255, 255, 0)"
                }
              }
              multiline
              numberOfLines={3}
              autoFocus={false}
              editable={false}
            >
              {this.state.inputContents.join("，")}
            </Input>
          </View>
          <View
            style={{
              flexDirection: "row",
              width: "100%",
              marginTop: Platform.OS === "ios" ? -20 : 20
            }}
          >
            <Button
              title={" 自 增"}
              onPressIn={this._add}
              containerStyle={{ flex: 0.5, marginLeft: 12, marginRight: 12 }}
              buttonStyle={{ borderRadius: 6 }}
              icon={<Icon name="plus" size={15} color="white" />}
            />
            <Button
              title={" 自 减"}
              onPressIn={this._minus}
              containerStyle={{ flex: 0.5, marginLeft: 12, marginRight: 12 }}
              buttonStyle={{ borderRadius: 6 }}
              icon={<Icon name="minus" size={15} color="white" />}
            />
          </View>
          <Overlay
            isVisible={this.props.homeStore.isVisualPop}
            width={width - 60}
            height={height - 200}
            onBackdropPress={() => {}}
          >
            <PopView
              title={"Hello!"}
              content={"Welcome to React Native Elements."}
              homeStore={this.props.homeStore}
            />
          </Overlay>
          <Button
            title={"弹 窗"}
            onPressIn={this._pop}
            containerStyle={{
              flex: 1,
              marginLeft: 12,
              marginRight: 12,
              marginTop: 20
            }}
            buttonStyle={{ borderRadius: 6, backgroundColor: "green" }}
          />
          <ImageView
            style={styles.imageViewStyle}
            homeStore={this.props.homeStore}
            refitContentOffset={this._refitContentOffset}
          />
          <Button
            title={"图片选择"}
            containerStyle={{
              flex: 1,
              marginLeft: 12,
              marginRight: 12,
              marginTop: 20,
              marginBottom: 20
            }}
            buttonStyle={{ borderRadius: 6, backgroundColor: "purple" }}
            onPressIn={this._imagePicker}
          />
        </ScrollView>
        <ActionSheet
          ref={(ref: any) => (this._actionSheet = ref)}
          title={"图片选择"}
          options={["从相册中选取", "去拍照", "取消"]}
          cancelButtonIndex={2}
          onPress={(index: number) => {
            this._goPicker(index);
          }}
        />
      </SafeAreaView>
    );
  }

  componentDidMount() {}

  componentWillUnmount() {
    this.props.homeStore.removeAllImages();
  }

  _add = () => {
    this.props.homeStore.plus();
    RNToast(this.props.homeStore.num.toString());
  };

  _minus = () => {
    this.props.homeStore.minus();
    RNToast(this.props.homeStore.num.toString());
  };

  _pop = () => {
    this.props.homeStore.isVisualPop = true;
  };

  _imagePicker = () => {
    if (Platform.OS === "ios") {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ["从相册中选取", "去拍照", "取消"],
          cancelButtonIndex: 2,
          title: "图片选择"
        },
        (buttonIndex: number) => {
          this._goPicker(buttonIndex);
        }
      );
    } else {
      this._actionSheet.show();
    }
  };

  _goPicker = (index: number) => {
    if (index === 0) {
      //相册
      ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: false,
        multiple: false,
        mediaType: "photo"
      })
        .then((image: any) => {
          this.props.homeStore.appendOneImage(image.path);
          setTimeout(() => {
            this._scrollView.scrollToEnd({
              animated: true,
              duration: 0.3
            });
          }, 300);
        })
        .catch((e: Error) => {
          console.warn("Image Picker Failed:" + e);
        });
    } else if (index === 1) {
      //相机
      ImagePicker.openCamera({
        width: 300,
        height: 400,
        cropping: false,
        mediaType: "photo"
      })
        .then((image: any) => {
          this.props.homeStore.appendOneImage(image.path);
          setTimeout(() => {
            this._scrollView.scrollToEnd({
              animated: true,
              duration: 0.3
            });
          }, 300);
        })
        .catch((e: Error) => {
          console.warn("Image Picker Failed:" + e);
        });
    }
  };

  _refitContentOffset = () => {
    this._scrollView.scrollToEnd({ animated: true, duration: 300 });
  };

  _pressInput = () => {
    Alert.alert("提示", "只能通过选择标签按钮输入哦~", [
      {
        text: "我知道了",
        onPress: () => {
          // console.warn("alert button has been clicked");
        }
      }
    ]);
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollContent: {
    flex: 1,
    backgroundColor: "white"
  },
  buttonGroupStyle: {
    height: 120
  },
  textInputStyle: {
    height: 82,
    width: "100%"
  },
  imageViewStyle: {
    marginTop: 20
  },
  testStyle: {}
});
